<template>
	<view>
		<view class="form_split_10"></view>
		<u-dropdown class="self_drop">
			<u-dropdown-item :title="lookTitle" v-model="look" :options="optionLook" @change="handleLook" />
			<u-dropdown-item :title="settrTitle" v-model="settr" :options="optionSettr" @change="handleSettr" />
		</u-dropdown>
		<u-empty image="search" description="没有找到对应的信息" style="background-color:#fff" v-if="show_empty === true" />
		<view>
			<view class="box_1">
				<view v-for="(item, index) in itemList" :key="index">
					<view class="box_item">
						<view class="tx1">
							<view class="name">{{ item.jobname }}</view>
							<view class="right_txt">{{ item.addtime | timeFilter }}</view>
						</view>
						<view class="tx2">
							{{ item.education_text }} · {{ item.experience_text }} ·
							{{ item.nature_text }}
							<view :class=" parseInt(item.is_look) === 1 ? 'right_txt' : 'right_txt not_download' ">
								{{ parseInt(item.is_look) === 1 ? "已查看" : "未查看" }}
							</view>
						</view>
						<view class="tx3" @click="toShow(item)">
							<view class="name">公司名称：{{ item.companyname }}</view>
							<view class="time_txt">
								面试时间：<text
									:class="parseInt(item.overtime) === 1 ? '' : 'time'">{{ item.interview_time | interviewTimeFilter }}</text>
								<text v-if="parseInt(item.overtime) === 1"> [已过期]</text>
							</view>
						</view>
					</view>
					<view class="form_split_10"></view>
				</view>
			</view>
			<u-loadmore class="u-loadmore" v-if="itemList.length >= pagesize" :status="finished_status" />
		</view>
		<u-modal v-model="showDetail" title="面试邀请详情" show-cancel-button>
			<view class="interview_details_pop_box">
				<view class="detail_line">
					<view class="line_left">面试职位：</view>
					<view class="line_right">
						<view class="a_black" @click="handleClick('/job/',detailItem.jobid)">{{ detailItem.jobname }}
						</view>
					</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line">
					<view class="line_left">公司名称：</view>
					<view class="line_right">
						<view class="a_black" @click="handleClick('/company/',detailItem.comid)">
							{{ detailItem.companyname }}
						</view>
					</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line">
					<view class="line_left">面试时间：</view>
					<view class="line_right">{{ detailItem.interview_time | interviewTimeFilter }}</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line">
					<view class="line_left">联系信息：</view>
					<view class="line_right">
						<text class="a_blue" @click="toCall(detailItem.tel)">{{ detailItem.tel }}</text>
						({{ detailItem.contact }})
					</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line">
					<view class="line_left">面试地址：</view>
					<view class="line_right">{{ detailItem.address }}</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line">
					<view class="line_left">备注信息：</view>
					<view class="line_right">{{ detailItem.note }}</view>
					<view class="clear"></view>
				</view>
				<view class="detail_desc">
					温馨提示：招聘企业无权收取任何费用,面试求职中请加强自我保护,避免上当受骗！
				</view>
			</view>
		</u-modal>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import {
		formatTime,
		parseTime
	} from '@/utils/index'
	import http from '@/utils/http'
	import api from '@/api'
	export default {
		name: 'PersonalInterview',
		filters: {
			timeFilter(timestamp) {
				return formatTime(timestamp, '{y}-{m}-{d}', true)
			},
			interviewTimeFilter(timestamp) {
				return parseTime(timestamp, '{y}-{m}-{d} {h}:{i}')
			}
		},
		data() {
			return {
				showDetail: false,
				detailItem: [],
				optionLook: [{
						label: '全部',
						text: '全部',
						value: ''
					},
					{
						label: '已查看',
						text: '已查看',
						value: 1
					},
					{
						label: '未查看',
						text: '未查看',
						value: 2
					}
				],
				look: '',
				settr: '',
				lookTitle: '查看状态',
				settrTitle: '面试时间',
				page: 1,
				pagesize: 15,
				itemList: [],
				finished_status: 'loadmore',
				show_empty: false
			}
		},
		watch: {
			$Route(to, from) {
				this.page = 1 // 条件改变将page重置为1
				this.getData(true)
			}
		},
		computed: {
			optionSettr() {
				let optionSettr = this.$store.state.dropdownSettrOption
				optionSettr.forEach(item => {
					item.label = item.text
				})
				return optionSettr
			}
		},
		mounted() {
			this.getData(true)
		},
		onReachBottom() {
			this.page++
			this.getData(false)
		},
		methods: {
			handleClick(path, id) {
				url: path + id
			},
			// 查看状态
			handleLook(value) {
				this.page = 1
				this.getData(true)
			},
			// 选择时间
			handleSettr(value) {
				this.page = 1
				this.getData(true)
			},
			// 动态设置所选查看状态的title
			setLookText(value) {
				let thisLook = this.optionLook.filter(
					item => parseInt(item.value) === value
				)
				this.lookTitle = thisLook[0].text
			},
			// 动态设置所选时间的title
			setSettrText(value) {
				let thisSettr = this.optionSettr.filter(
					item => parseInt(item.value) === value
				)
				this.settrTitle = thisSettr[0].text
			},
			/**
			 * 获取数据
			 * @param isInit 是否为初始化
			 */
			getData(isInit) {
				this.show_empty = false
				if (isInit === true) {
					this.page = 1
				} else {
					this.finished_status = 'loading'
				}
				// 恢复已选条件
				if (this.look !== '') {
					this.setLookText(parseInt(this.look))
				} else {
					this.lookTitle = '查看状态'
				}
				if (this.settr !== '' && this.settr !== 0) {
					this.setSettrText(parseInt(this.settr))
				} else {
					this.settrTitle = '面试时间'
				}
				http
					.get(api.personal_manage_interview, {
						is_look: this.look == 2 ? 0 : this.look,
						settr: this.settr,
						page: this.page,
						pagesize: this.pagesize
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							if (isInit === true) {
								this.itemList = [...res.data.data.items]
							} else {
								this.itemList = this.itemList.concat(res.data.data.items)
							}

							// 数据全部加载完成
							if (res.data.data.items.length < this.pagesize) {
								this.finished_status = 'nomore'
								if (isInit === false) {
									this.finished_status = 'nomore'
								} else if (res.data.data.items.length === 0) {
									this.show_empty = true
								}
							}
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			/**
			 * 获取对应的面试详情内容
			 */
			toShow(item) {
				this.detailItem = item
				this.showDetail = true
				http
					.post(api.personal_manage_interview_setLook, {
						id: item.id
					})
					.then(res => {
						let itIndex = this.itemList.findIndex(it => parseInt(it.id) === parseInt(item.id))
						this.itemList[itIndex].is_look = 1
					})
					.catch(err => {
						console.log(err)
					})
			},
			/**
			 * 拨打电话
			 * @param tel
			 */
			toCall(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.interview_details_pop_box {
		max-height: 600rpx;
		background: #ffffff;
		overflow-x: hidden;
		overflow-y: auto;
		font-size: 26rpx;
		padding: 40rpx;

		.detail_desc {
			width: 100%;
			background-color: #f5f5f5;
			line-height: 1.5;
			color: #666666;
			padding: 16rpx 40rpx;
			margin-top: 20rpx;
		}

		.detail_line {
			line-height: 1.5;
			margin-bottom: 10rpx;

			.line_left {
				float: left;
				color: #999999;
				text-align: right;
				width: 160rpx;
				line-height: 1.5;
			}

			.line_right {
				float: left;
				color: #333333;
				word-break: break-all;
				width: 350rpx;
				text-align: left;
				line-height: 1.5;

				.a_black {
					color: #333333;
					text-decoration: none;
				}

				.a_blue {
					color: #1887fb;
					text-decoration: none;
				}
			}
		}
	}

	.self_drop {
		&::after {
			border: none;
		}
	}

	.box_1 {
		width: 100%;

		.box_item {
			width: 100%;
			background-color: #ffffff;
			padding: 0 32rpx 40rpx 32rpx;

			.tx3 {
				width: 100%;
				border-radius: 18rpx;
				box-shadow: 0 0 10rpx #c2c2c2;
				position: relative;
				padding: 28rpx 0 24rpx;

				&::after {
					position: absolute;
					right: 34rpx;
					top: 62rpx;
					width: 14rpx;
					height: 14rpx;
					border-top: 2rpx solid #999999;
					border-right: 2rpx solid #999999;
					transform: rotate(45deg);
					content: "";
				}

				.name {
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					max-width: 580rpx;
					padding: 0 0 0 82rpx;
					background-image: url($ImgUrl + "interview_name_ico.png");
					background-position: 36rpx 4rpx;
					background-repeat: no-repeat;
					background-size: 34rpx 32rpx;
					margin-bottom: 16rpx;
				}

				.time_txt {
					font-size: 24rpx;
					color: #999999;
					padding: 0 0 0 82rpx;

					.time {
						color: #1787fb;
					}
				}
			}

			.tx2 {
				font-size: 28rpx;
				color: #666666;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				position: relative;
				padding-right: 120rpx;
				margin-bottom: 34rpx;

				.right_txt {
					position: absolute;
					right: 0;
					top: -2rpx;
					font-size: 24rpx;
					padding: 6rpx 16rpx;
					background-color: #fafafa;
					border-radius: 6rpx;
					color: #999999;

					&.not_download {
						color: #ff5d24;
						background-color: #fffbf8;
					}
				}
			}

			.tx1 {
				margin-bottom: 18rpx;
				position: relative;
				padding: 38rpx 0 0;

				.name {
					font-size: 32rpx;
					color: #333333;
					font-weight: bold;
					max-width: 480rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.right_txt {
					position: absolute;
					right: 0;
					top: 44rpx;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}

	.notice_bar {
		width: 100%;
		padding: 22rpx 0 22rpx 70rpx;
		font-size: 24rpx;
		color: #ff6600;
		background-image: url($ImgUrl + "remind_ico.svg");
		background-color: #fffbeb;
		background-repeat: no-repeat;
		background-position: 32rpx center;
		background-size: 32rpx;
	}
</style>
